<template>
  <div>
    <div class="box">
      <el-card class="box-card">
        <el-form ref="form" :rules="rules" :model="formData">
          <!-- 仓库信息 -->
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="仓库编码" prop="code">
                <el-input v-model="formData.code" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库类型" prop="type">
                <el-select v-model="formData.type " placeholder="请选择" style="width:100%">
                  <el-option
                    v-for="item in optionsType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 省市区 -->
          <el-row :gutter="24">
            <el-col :span="16">
              <el-form-item label="省/市/区" prop="location">
                <el-cascader
                  v-model="valueLocation"
                  :options="options"
                  :props="{ expandTrigger: 'hover' }"
                  style="width:100%"
                  @change="handleChange"
                />
              </el-form-item></el-col>

          </el-row>
          <!-- 详细地址  仓库状态 -->
          <el-row :gutter="24">
            <el-col :span="16">
              <el-form-item label="详细地址">
                <el-input v-model="formData.address" placeholder="请输入" style="width:627px" />
              </el-form-item>
            </el-col>
            <el-col :span="2.5">
              <el-form-item label="仓库状态" prop="status">
                <el-radio v-model="formData.status" label="1">启用</el-radio>
                <el-radio v-model="formData.status" label="2">停用</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 仓库面积 -->
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="仓库面积">
                <el-input v-model.number="formData.surface" placeholder="请输入">
                  <template slot="append">m³</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人" prop="personName">
                <el-input v-model="formData.personName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话">
                <el-input v-model="formData.phone" placeholder="请输入" />
              </el-form-item>
            </el-col>

          </el-row>
          <el-divider />
          <el-row :gutter="24" type="flex" justify="center">
            <el-col :span="6">
              <el-button round style="width:170px" @click="$router.push('/information/warehouse')">返回</el-button>
            </el-col>
            <el-col :span="6">
              <el-button round type="warning" style="width:170px" @click="sbumitData">提交</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { addWareHouse } from '@/api/information/warehouse'
// 添加仓库接口
export default {
  data() {
    return {
      radio: '1',
      code: '',
      value: '',
      optionsType: [{
        value: 'ZZ',
        label: '中转仓'
      }, {
        value: 'JZ',
        label: '加工仓'
      }, {
        value: 'CB',
        label: '储备仓'
      },
      {
        value: 'LC',
        label: '冷藏仓'
      }
      ],
      valueLocation: [],
      options: [],
      formData: {
        type: '',
        code: '',
        name: '',
        location: '',
        address: '',
        status: '1',
        surface: 0,
        personName: '',
        phone: '',
        province: '',
        city: '',
        area: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ]

      }

    }
  },
  created() {
    this.options = this.regionData
    this.formData.code = `CK${this.RanderNum}`
  },
  methods: {
    ...mapActions('warehouse', ['getWarehouseDetails']),
    async sbumitData() {
      await this.$refs.form.validate()
      await addWareHouse(this.formData)
      this.getWarehouseDetails()
      this.$message.success('添加成功')
      this.$router.push('/information/warehouse')
    },
    // 处理城市数据
    handleChange(values) {
      const [province, city, area] = [...values]
      this.formData.province = this.CodeToText[province]
      this.formData.city = this.CodeToText[city]
      this.formData.area = this.CodeToText[area]
      this.formData.location = `${this.CodeToText[province]}/${this.CodeToText[city]}/${this.CodeToText[area]}`
    }
    // 格式化仓库类型数据
    // formatOptionsType(row, col, val) {
    //   const type = this.optionsType.find(item => item.value === val)
    //   return type ? type.value : '未知'
    // }
  },
  computed: {
    // 随机数
    RanderNum() {
      return Math.floor(Math.random() * 100000)
    }
  }
}

</script>

<style lang='scss' scoped>
.box{
  width: 1016px;
  padding: 10px;

}

</style>
